<script lang="ts" setup>
import { getDepAllAPI } from "@/apis/consult";
import type { DepartmentItem } from "@/types/consult";
import { computed, ref } from "vue";

//

//所有科室列表
const depList = ref<DepartmentItem[]>([]);

//1.获取所有科室
const getDepAll = async () => {
  const res = await getDepAllAPI();
  console.log(res);

  depList.value = res.data;
};

//调用获取所有科室
getDepAll();

// 2. 获取当前选中的科室
const activeIndex = ref(0);
const activeDepChild = computed(() => {
  // 注意 ?.安全访问 层级较深的属性
  return depList.value[activeIndex.value]?.child;
});

//获取分步表单的页面参数
const props = defineProps<{
  type: string;
  illnessType: string;
}>();
</script>

<template>
  <view class="department-page">
    <!-- 一级科室 -->
    <scroll-view scroll-y class="department-primary">
      <view
        v-for="(item, index) in depList"
        :key="item.id"
        class="department-item"
        :class="{ active: activeIndex === index }"
        @click="activeIndex = index"
      >
        {{ item.name }}
      </view>
    </scroll-view>

    <!-- 二级科室 -->
    <scroll-view class="department-secondary">
      <navigator
        hover-class="none"
        :url="`/subpkg_consult/pages/description/description?depId=${item.id}&type=${props.type}&illnessType=${props.illnessType}`"
        class="department-item"
        v-for="item in activeDepChild"
        :key="item.id"
      >
        {{ item.name }}
      </navigator>
    </scroll-view>
  </view>
</template>

<style lang="scss">
@import "./index.scss";
</style>
